<template>
  <div>
    <div>
      <p>请选择目的地</p>
      <el-select v-model="label" placeholder="请选择">
        <el-option
            v-for="item in options"
            :key="item.label"
            :label="item.label"
            :value="item.label">
        </el-option>
      </el-select>
      ------->
      <el-select v-model="label2" placeholder="请选择">
        <el-option
            v-for="item in options2"
            :key="item.label2"
            :label="item.label2"
            :value="item.label2">
        </el-option>
      </el-select>
      <el-button @click="query">查询</el-button>
    </div>
    <div v-if="isShow">
      <p align="left">直达：</p>
      <el-table
          :data="dataList"
          :highlight-current-row="true"
          border
          current-row-key="airlineId"
          stripe
          style="width: 100%"
      >
        <el-table-column align="center"
                         label="序号"
                         type="index"
                         width="50">
        </el-table-column>
        <el-table-column align="center"
                         label="航班号"
                         prop="airlineNumber"
                         width="80"
        >
        </el-table-column>
        <el-table-column align="center"
                         label="起止城市">
          <template v-slot="scope">
            <span>{{ scope.row.beginCity }}--->{{ scope.row.lastCity }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="起止机场">
          <template v-slot="scope">
            <span>{{ scope.row.beginAirport }}--->{{ scope.row.lastAirport }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="起止时间"
        >
          <template v-slot="scope">
            <span>{{ scope.row.beginTime }}--->{{ scope.row.lastTime }}</span>
          </template>
        </el-table-column>

      </el-table>

      <p align="left">中转：</p>
      <el-table
          :data="dataList2"
          :highlight-current-row="true"
          border
          current-row-key="airline_id"
          stripe
          style="width: 100%"
      >
        <el-table-column align="center"
                         label="序号"
                         type="index"
                         width="50">
        </el-table-column>
        <el-table-column align="center"
                         label="航班号"
                         width="80"
        >
          <template v-slot="scope">
            <span>{{ scope.row.airline_number }}--->{{ scope.row.transit_number }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="起止城市">
          <template v-slot="scope">
            <span>{{ scope.row.begin_city }}--->{{ scope.row.transit_city }}--->{{ scope.row.last_city }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="起止机场">
          <template v-slot="scope">
            <span>{{ scope.row.begin_airport }}--->{{ scope.row.transit_airport }}--->{{
                scope.row.last_airport
              }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="起止时间"
        >
          <template v-slot="scope">
            <span>{{ scope.row.begin_time }}--->{{ scope.row.transit_begin_time }}-->{{
                scope.row.transit_last_time
              }}</span>
          </template>
        </el-table-column>


      </el-table>
    </div>
    <div v-if="isShow">
      <baidu-map :scroll-wheel-zoom="true">
        <bm-view class="map"></bm-view>
        <bm-local-search :auto-viewport="true" :keyword="keyword" :location="location"></bm-local-search>
        <bm-geolocation :autoLocation="true" :showAddressBar="true" anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-geolocation>
      </baidu-map>
    </div>
  </div>

</template>

<script>
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  ak: 'aZqvisVkDQ6N84SFftUdkwVaZC7krxy4'
})
export default {

  name: "u_index",
  data() {
    return {
      dataList: [],//直达航班数据
      dataList2: [],//中转航班数据
      location: '',
      keyword: '机场',
      isShow: false,
      options: [{
        label: '北京'
      }, {
        label: '上海'
      }, {
        label: '江苏'
      }, {
        label: '南京'
      }, {
        label: '内蒙古'
      }],
      options2: [{
        label2: '上海'
      }, {
        label2: '北京'
      }, {
        label2: '江苏'
      }, {
        label2: '南京'
      }, {
        label2: '内蒙古'
      },
        {
          label2: '呼和浩特'
        }],
      label: '',
      label2: '',
    }
  },
  created() {
  },
  methods: {
    query() {
      this.location = this.label2;
      this.isShow = true;

      // 组织参数，拼接url请求地址
      let paramStr = "?beginCity=" + this.label
          + "&lastCity=" + this.label2;
      this.axios
          .get("/airline/direct/" + paramStr)
          .then(res => {
            this.dataList = res.data.data;
          })
      this.axios
          .get("/airline/transit/" + paramStr)
          .then(res => {
            this.dataList2 = res.data.data;
          })
    }
  }
}
</script>

<style scoped>
.map {
  width: 100%;
  height: 500px;
}
</style>